<!--
 * @Author: your name
 * @Date: 2021-04-01 16:50:40
 * @LastEditTime: 2021-04-06 14:52:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \shop\training-group-5-warehouse\dianshang\src\views\Direct\index.vue
-->
<!-- 直播间 -->
<template>
  <div class="direct">
    <header>
      <div>
        <span @click="() => $router.go(-1)">&lt;</span>
      </div>
      <div>
        <span style="font-size: 12px;">{{ liveItem.name }}</span>
      </div>
      <div
        style="display: flex;  flex-direction: column; justify-content: center;"
      >
        <span style="font-size: 12px; color: #dd889a;">{{ text }}</span>
        <van-switch
          v-model="liveItem.isShow"
          active-color="#dd889a"
          inactive-color="#f32c29"
          size="20px"
          @change="handleSetText"
        />
      </div>
      <div>
        <span style="font-size: 12px;">
          关注人数：
          <b style="color: #dd889a;">{{ liveItem.attention }}</b>
        </span>
      </div>
      <div
        v-if="avatar"
        style="width: 30px; height: 30px;  border-radius: 50%;"
      >
        <img
          :src="avatar"
          alt
          style="width: 100%; height: 100%;  border-radius: 50%;"
        />
      </div>
      <div>
        <van-icon name="share-o" size="20px" />
      </div>
    </header>
    <main>
      <div
        class="video"
        style="width: 100%; height: 100%;"
        @click="handleVideo"
      >
        <vue-baberrage
          :isShow="barrageIsShow"
          :barrageList="barrageList"
          :maxWordCount="maxWordCount"
          :throttleGap="throttleGap"
          :loop="barrageLoop"
          :boxHeight="boxHeight"
          :boxWidth="boxWidth"
          :messageHeight="messageHeight"
          :messageWidth="messageWidth"
          :lanesCount="lanesCount"
        ></vue-baberrage>
        <video
          ref="video"
          id="my-video"
          class="video-js vjs-default-skin vjs-big-play-centered"
          width="100%"
          height="100%"
          :muted="true"
          preload="auto"
          poster="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3870964477,3746012709&fm=26&gp=0.jpg"
          :autoplay="true"
          :loop="true"
          :controls="false"
        >
          <source :src="liveUrl" type="video/mp4" />
        </video>
        <div class="videoShow" v-show="videoBtn">
          <van-icon
            name="pause-circle-o"
            size="50px"
            color="#fff"
            v-show="btnPlay === false"
            @click="handleVideoPause"
          />
          <van-icon
            name="play-circle-o"
            size="50px"
            color="#fff"
            v-show="btnPlay === true"
            @click="handleVideoPlay"
          />
        </div>
      </div>
    </main>
    <footer>
      <div
        style="flex: 1; display: flex; align-items: center; position: relative;"
      >
        <ul
          v-show="textIsShow"
          style="width: 230px; height: 200px;  position: absolute; left: 0; top: -210px; background: rgba(124,119,126,0.2); border-radius: 20px; font-size: 12px; padding: 5px 10px;"
        >
          <li style="color: #d9be81;">
            <span
              >国家八部门开展网络直播行业专项整治和规范管理行动，严肃治理传播色情低俗内容、
              诱导高额打赏等乱象。作为网络直播企业，百度直播积极响应行动要求，坚决规范守法经营，坚决抵制不良内容，自觉接受社会监督。我们向平台全体主播发出倡议，共同营造积极健康网络直播环境，不传播错误价值导向，不开展禁止内容表演，杜绝淫秽色情和低俗，健康直播从我做起！</span
            >
          </li>
          <li
            v-for="(item, index) in textContainer"
            :key="index"
            style="display: flex; align-items: center;"
          >
            <span style="flex: 1;"></span>
            <span style="margin: 0 10px;">{{ item.value }}</span>
            <span style="width: 20px; height: 20px;">
              <img :src="item.avatar" alt style="width: 100%; height: 100%;" />
            </span>
          </li>
        </ul>
        <input
          type="text"
          placeholder="跟主播聊点什么..."
          style="width: 100%; height: 100%; border: none; outline: none; background: rgb(0, 0, 0); color: #fff; font-size: 12px;"
          @focus="() => (textIsShow = true)"
          @blur="() => (textIsShow = false)"
          @keydown="handleKeyDown($event)"
        />
      </div>
      <div style="display: flex;">
        <div
          style="color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-direction: column;"
        >
          <span style="color: #dd889a;">{{ liveItem.give }}</span>
          <van-icon
            name="like"
            :color="give"
            size="20px"
            @click="handleSetGive"
          />
        </div>
        <div
          style="display: flex;  flex-direction: column; justify-content: center; margin: 0 30px;"
        >
          <span style="font-size: 12px; color: #dd889a;">{{ barrageVal }}</span>
          <van-switch
            v-model="barrageIsShow"
            active-color="#dd889a"
            inactive-color="#f32c29"
            size="20px"
            @change="handleSetBarrageIsShow"
          />
        </div>
        <div
          style="color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; position: relative; "
          @click="() => (shopShow = true)"
        >
          <img :src="shopList" alt style="width: 40px; height: 100%;" />
          <span
            style="width: 20px; height: 20px; background: #e03129; border-radius: 50%; position: absolute; left: 23px; top: 0; border: solid 2px #fff; color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center;"
            >{{ list.length }}</span
          >
        </div>
      </div>
      <div class="shopRecommend" v-show="recommend">
        <div class="containerTop">
          <span>刚刚看过</span>
          <span @click="() => (recommend = false)">X</span>
        </div>
        <div class="containerCenter">
          <dl>
            <dt>
              <img :src="list.length ? list[0].img : null" alt />
            </dt>
            <dd>
              <p>{{ list.length ? list[0].title : null }}</p>
              <p>
                <span>￥{{ list.length ? list[0].price : null }}</span>
                <span @click="handlePushZhifu(list[0].price)">立即购买</span>
              </p>
            </dd>
          </dl>
        </div>
      </div>
    </footer>
    <div class="listBox" :class="shopShow ? 'active' : 'actives'">
      <div class="listContainer" :class="shopShow ? 'active' : 'actives'">
        <div
          class="dirlogTop"
          style="width: 100%; height: 46px; background: #f6f6f6; border-radius: 20px 20px 0 0; display: flex; align-items: center; justify-content: space-between; padding: 0 30px;"
        >
          <span style="font-size: 14px; font-weight: 600;">全部商品</span>
          <span style="font-size: 12px;" @click="shopShow = false">关闭</span>
        </div>
        <div class="listContent">
          <dl v-for="item in list" :key="item.id">
            <dt>
              <img :src="item.img" alt />
            </dt>
            <dd>
              <p>
                <span>{{ item.title }}</span>
              </p>
              <p>
                <span>已售{{ item.soldOut }}+件</span>
              </p>
              <p>
                <span>￥{{ item.price }}</span>
                <span @click="handlePushShopCar(item)">加入购物车</span>
                <span @click="handlePushZhifu(item.price)">立即购买</span>
              </p>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { vueBaberrage, MESSAGE_TYPE } from "vue-baberrage";
import { mapState, mapActions, mapMutations } from "vuex";
import shopList from "../../assets/img/shopList.jpg";

Vue.use(vueBaberrage);
export default {
  components: {},
  data() {
    return {
      recommend: true, //推荐开关
      shopShow: false, //商品列表弹框开关
      //视频参数
      videoBtn: false,
      btnPlay: false,
      liveUrl: "//vjs.zencdn.net/v/oceans.mp4",
      time: null,
      //弹幕参数
      barrageIsShow: true, //弹幕开关
      // 消息框全顯示的高度
      messageHeight: 70,
      messageWidth: 150,
      boxHeight: 412,
      boxWidth: 412,
      barrageLoop: true,
      maxWordCount: 120,
      throttleGap: 5000,
      barrageList: [],
      lanesCount: 10,
      liveItem: {}, //选中一项的直播列表容器
      text: "立即关注", //关注开关文字
      avatar: "", //用户头像
      barrageVal: "关闭弹幕", //弹幕开关文本
      textIsShow: true, //直播室聊天框开关
      textTime: null, //直播室聊天框定时器
      textContainer: [],
      give: "#fff",
      shopList: shopList,
    };
  },
  computed: {
    ...mapState("login", ["userInfo"]),
    ...mapState("live", ["list"]),
  },
  methods: {
    ...mapActions("live", ["getShopList"]),
    ...mapMutations(["SET_LIST"]),
    //显示控制开关
    handleVideo() {
      this.videoBtn = true;
      this.time = setTimeout(() => {
        if (!this.btnPlay) {
          this.videoBtn = false;
        }
      }, 3000);
    },
    //显示停止开关
    handleVideoPause() {
      this.btnPlay = true;
      this.$refs.video.pause();
    },
    //显示开始开关
    handleVideoPlay() {
      this.btnPlay = false;
      this.$refs.video.play();
      this.time = setTimeout(() => {
        if (!this.btnPlay) {
          this.videoBtn = false;
        }
      }, 3000);
    },
    //弹幕数据
    async getBarrage() {
      const data = await this.$api.barrage();
      if (data.code === 200) {
        data.data.barrage.forEach((v) => {
          this.barrageList.push({
            id: v.id,
            avatar: v.avatar,
            msg: v.msg,
            time: v.time,
            type: MESSAGE_TYPE.NORMAL,
            barrageStyle: v.barrageStyle,
          });
        });
      }
    },
    //获取直播数据筛选id
    async getLiveData() {
      const data = await this.$api.live();
      if (data.code === 200) {
        this.liveItem = data.data.pageList.filter(
          (item) => item.liveId === Number(this.$route.query.id)
        )[0];
      }
      this.avatar = this.userInfo.avatar;
    },
    //开关切换
    handleSetText() {
      if (this.liveItem.isShow) {
        this.text = "已关注";
        this.liveItem.isShow = true;
        this.liveItem.attention += 1;
      } else {
        this.text = "立即关注";
        this.liveItem.isShow = false;
        this.liveItem.attention -= 1;
      }
    },
    //弹幕开关
    handleSetBarrageIsShow() {
      if (this.barrageIsShow) {
        this.barrageVal = "关闭弹幕";
      } else {
        this.barrageVal = "开启弹幕";
      }
    },
    //直播室聊天框定时器
    handleSetTextTime() {
      this.textTime = setTimeout(() => {
        this.textIsShow = false;
      }, 5000);
    },
    //键盘回车
    handleKeyDown(e) {
      if (e && e.keyCode == 13) {
        if (sessionStorage.getItem("token")) {
          if (e.target.value !== "") {
            this.textContainer.unshift({
              avatar: this.avatar,
              value: e.target.value,
            });
            this.barrageList.unshift({
              avatar: this.avatar,
              value: e.target.value,
            });
            e.target.value = "";
          }
        } else {
          alert("请先登录");
          this.$router.push("/login");
        }
      }
    },
    //点赞
    handleSetGive() {
      this.give = "red";
      this.liveItem.give += 1;
    },
    //加入购物车
    handlePushShopCar(item) {
      alert("成功加入购物车");
      this.SET_LIST(item);
    },
    //跳转支付页面
    handlePushZhifu(price) {
      this.$router.push({ path: "/zhifu", query: { allpri: price } });
    },
  },

  mounted() {
    this.getBarrage(); //弹幕数据
    this.handleSetTextTime(); //执行聊天框定时器
  },
  created() {
    this.getLiveData(); //获取直播数据筛选id
    this.getShopList(); //商品列表数据
  },
  //清除定时器
  beforeDestroy() {
    clearTimeout(this.time); //视频
    clearTimeout(this.textTime); //聊天框定时器
  },
};
</script>

<style lang="scss">
.direct {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgb(0, 0, 0);
  header {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    background: rgb(0, 0, 0);
    color: #fff;
    div {
      display: flex;
      align-items: center;
    }
  }
  main {
    flex: 1;
    overflow: hidden;
    position: relative;
    .video {
      position: relative;
      .videoShow {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 998;
      }
    }
  }
  footer {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    background: rgb(0, 0, 0);
    position: relative;
    ul {
      overflow-y: scroll;
      z-index: 998;
      li {
        margin: 10px 0;
        color: #fff;
      }
    }
    .shopRecommend {
      width: 200px;
      height: 100px;
      background: #fff;
      position: absolute;
      right: 6px;
      top: -93px;
      z-index: 998;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .containerTop {
        width: 100%;
        height: 25px;
        background: red;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        color: #fff;
      }
      .containerCenter {
        flex: 1;
        overflow: hidden;
        dl {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          dt {
            width: 50px;
            height: 50px;
            margin: 0 10px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          dd {
            font-size: 12px;
            p:nth-child(2) {
              margin: 10px 0;
              span:nth-child(1) {
                color: red;
                margin-right: 30px;
              }
              span:nth-child(2) {
                display: inline-block;
                width: 55px;
                height: 20px;
                background: red;
                color: #fff;
                text-align: center;
                line-height: 20px;
                border-radius: 10px;
              }
            }
          }
        }
      }
    }
  }
  .video-js {
    width: 100%;
    height: 100%;
  }
  .barrages-drop {
    .blue {
      border-radius: 50px;
      background: #e6ff75;
      color: rgb(162, 243, 11);
    }

    .green {
      border-radius: 50px;
      background: #75ffcd;
      color: rgb(82, 238, 10);
    }
    .red {
      border-radius: 50px;
      background: #e68fba;
      color: rgb(245, 11, 11);
    }
    .yellow {
      border-radius: 50px;
      background: #dfc795;
      color: rgb(29, 14, 247);
    }
  }
  .baberrage-stage {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    font-size: 15px;
    z-index: 997;
  }
  .listBox {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0;
    bottom: -100%;
    z-index: 999;
    transition: all 0.01s;
    .listContainer {
      width: 100%;
      height: 65%;
      background: #fff;
      position: fixed;
      bottom: -100%;
      left: 0;
      z-index: 999;
      border-radius: 20px 20px 0 0;
      transition: all 2s;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .listContent {
        flex: 1;
        overflow-y: scroll;
        background: #f4f4f4;
        dl {
          width: 100%;
          height: 150px;
          margin: 10px 0;
          display: flex;
          align-items: center;
          background: #fff;
          dt {
            width: 100px;
            height: 100px;
            margin: 0 10px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          dd {
            height: 100px;
            display: flex;
            flex-direction: column;
            justify-items: flex-end;
            p {
              font-size: 14px;
            }
            p:nth-child(1) {
              font-weight: 600;
            }
            p:nth-child(2) {
              margin: 20px 0;
              color: #666;
            }
            p:nth-child(3) {
              span {
                margin: 0 5px;
              }
              span:nth-child(1) {
                color: #d45551;
                font-weight: 600;
              }
              span:nth-child(2) {
                display: inline-block;
                padding: 4px 4px;
                background: #ff6600;
                border-radius: 20px;
                color: #fff;
              }
              span:nth-child(3) {
                display: inline-block;
                padding: 4px 4px;
                background: #e12e1f;
                border-radius: 20px;
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
  .listBox.active {
    bottom: 0;
    .listContainer.active {
      bottom: 0;
    }
  }
  .listBox.actives {
    bottom: -100%;
    .listContainer.actives {
      bottom: -100%;
    }
  }
}
</style>
